<div class="multi-field-wrapper-checkpoints">
    {# This is a layout table #}
    <table class="checkpoints-table table table-bordered" id="gradeable_rubric" style=" border: 1px solid #AAA; max-width:50% !important;">
        <input type='hidden' name="csrf_token" value="{{ csrf_token }}" />
        <!-- Layout Headings -->
        <tr class="rubric_layout_header">
            <td class="layout_th_cell"> Label </th>
            <td class="layout_th_cell"> Extra Credit? </th>
        </tr>
        <!-- This is a bit of a hack, but it works (^_^) -->
        <tr class="rubric_layout_body multi-field" id="mult-field-0" style="display:none;">
            <td>
                <input style="width: 200px" name="checkpoint_label_0" aria-label="checkpoint 0" type="text" class="checkpoint_label" value="Checkpoint 0"/>
            </td>
            <td>
                <input type="checkbox" name="checkpoint_extra_0" aria-label="is checkpoint 0 counted as extra credit?" class="checkpoint_extra extra" value="true" />
            </td>
        </tr>
    </table>
    <button type="button" id="add-checkpoint_field">Add Checkpoint</button>
    <button type="button" id="remove-checkpoint_field" id="remove-checkpoint" style="visibilty:hidden;">Remove Last Checkpoint</button>
</div>
<br />
<!--Do you want a box for an (optional) message from the TA to the student?
<input type="radio" name="checkpoint_opt_ta_messg" value="true" /> Yes
<input type="radio" name="checkpoint_opt_ta_messg" value="false" /> No-->

<script type="text/javascript">

    $(document).ready(function() {
        let numCheckpoints = 0;

        function addCheckpoint(label, extra_credit) {
            // Add a new checkpoint to the page
            addCheckpointToPage(label, extra_credit);

            // When adding a checkpoint, save the rubric
            saveRubric(false);
        }

        function addCheckpointToPage(label, extra_credit) {
            var wrapper = $('.checkpoints-table');
            ++numCheckpoints;
            $('#mult-field-0', wrapper).clone(true).appendTo(wrapper).attr('id', 'mult-field-' + numCheckpoints).find('.checkpoint_label').val(label).focus();
            $('#mult-field-' + numCheckpoints, wrapper).find('.checkpoint_label').attr('name', 'checkpoint_label_' + numCheckpoints).attr('aria-label', 'checkpoint ' + numCheckpoints).change(() => saveRubric(false));
            $('#mult-field-' + numCheckpoints, wrapper).find('.checkpoint_extra').attr('name', 'checkpoint_extra_' + numCheckpoints).attr('checked', extra_credit).attr('aria-label', 'is checkpoint ' + numCheckpoints + ' counted as extra credit?').change(() => saveRubric(false));
            $('#remove-checkpoint_field').show();
            $('#mult-field-' + numCheckpoints, wrapper).show();
        }

        function removeCheckpoint() {
            if (numCheckpoints > 0) {
                $('#mult-field-' + numCheckpoints, '.checkpoints-table').remove();
                if (--numCheckpoints === 1) {
                    $('#remove-checkpoint_field').hide();
                }

                // When removing a checkpoint, save the rubric
                saveRubric(false);
            }
        }

        $('.multi-field-wrapper-checkpoints').each(function () {
            $("#add-checkpoint_field", $(this)).click(function (e) {
                addCheckpoint('Checkpoint ' + (numCheckpoints + 1), false);
            });
            $('#remove-checkpoint_field').click(function () {
                removeCheckpoint();
            });
        });

        $('#remove-checkpoint_field').hide();

        // Add the existing checkpoints
        if ($('#radio_checkpoints').is(':checked')){
            let components = {{ gradeable_components_enc|raw }};
            $.each(components, function(i,elem){
                var extra_credit = false;
                if (elem.max_value === 0) extra_credit = true;
                addCheckpointToPage(elem.title, extra_credit);
            });
            $('#checkpoints').show();
            $('#grading_questions').show();
        }
    });
</script>
